
<?php $__env->startSection('title', '菜单列表'); ?>

<?php $__env->startSection('css'); ?>
    <link href="<?php echo e(asset('static/js/bootstrap-table/bootstrap-table.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('static/js/jquery-treegrid/jquery.treegrid.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('static/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css')); ?>" rel="stylesheet'">
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>菜单列表</h4>
                </div>
                <div class="card-toolbar clearfix">
                    <div class="toolbar-btn-action">
                        <?php if(in_array('menu_add',Session::get('role_menu_action'))){ ?>
                        <a class="btn btn-primary m-r-5 add-btn" data-href="<?php echo e(url('admin/menu/add')); ?>"><i class="mdi mdi-plus"></i> 新增</a>
                        <?php } ?>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <div>
                            <button class="btn btn-xs btn-info expand_all">全部展开</button>
                            <button class="btn btn-xs btn-warning collapse_all">全部折叠</button>
                        </div>
                        <table class="tree-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>
<script type="text/javascript" src="<?php echo e(asset('static/js/bootstrap-table/bootstrap-table.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('static/js/bootstrap-table/bootstrap-table-zh-CN.min.js')); ?>"></script>
<!--行内编辑插件-->
<script type="text/javascript" src="<?php echo e(asset('static/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('static/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('static/js/jquery-treegrid/jquery.treegrid.min.js')); ?>"></script>
<script type="text/javascript" src="<?php echo e(asset('static/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js')); ?>"></script>
<script>
    var data = JSON.parse('<?php echo $list; ?>');
    var $treeTable = $('.tree-table');
    $treeTable.bootstrapTable({
        data: data,
        idField: 'id',
        uniqueId: 'id',
        dataType: 'jsonp',
        toolbar: '#toolbar2',
        columns: [
            {
                field: 'check',
                checkbox: true
            },
            {
                field: 'menu_name',
                title: '菜单名称'
            },
            {
                field: 'is_show',
                title: '是否显示',
                sortable: true,
                /*
                 * 可以选择采用开关来处理状态显示
                 * 或者采用上个示例的处理方式
                 */
                formatter: function (value, row, index) {
                    if (value == 0) {
                        is_checked = '';
                    } else if (value == 1){
                        is_checked = 'checked="checked"';
                    }
                    result = '<label class="lyear-switch switch-solid switch-success"><input type="checkbox" '+ is_checked +'><span  onClick="updateStatus('+ row.id +', '+ value +')"></span></label>';
                    return result;
                },
            },
            {
                field: 'route',
                title: '路径'
            },
            {
                field: 'sortby',
                title: '排序'
            },
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                events : {
                    'click .role-delete': function (e, value, row, index) {
                        del(row.id);
                    },
                    'click .role-edit': function (e, value, row, index) {
                        update(row.id);
                    }
                },
                formatter: operateFormatter
            }
        ],

        treeShowField: 'menu_name',
        parentIdField: 'pid',
        onResetView: function(data) {
            $treeTable.treegrid({
                initialState: 'collapsed', // 所有节点都折叠
                // initialState: 'expanded',// 所有节点都展开，默认展开
                treeColumn: 1,
                expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
                expanderCollapsedClass: 'mdi mdi-folder',
                onChange: function() {
                    $treeTable.bootstrapTable('resetWidth');
                }
            });

            // 只展开树形的第一集节点
            //$treeTable.treegrid('getRootNodes').treegrid('expand');
        },
        onCheck: function(row) {
            var datas = $treeTable.bootstrapTable('getData');

            selectChilds(datas, row, 'id', 'pid', true); // 选择子类

            selectParentChecked(datas, row, 'id', 'pid'); // 选择父类

            $treeTable.bootstrapTable('load', datas);
        },

        onUncheck: function(row) {
            var datas = $treeTable.bootstrapTable('getData');
            selectChilds(datas, row, 'id', 'pid', false);
            $treeTable.bootstrapTable('load', datas);
        },
    });

    // 操作按钮
    function operateFormatter(value, row, index) {
        return [
            <?php if(in_array('menu_edit',Session::get('role_menu_action'))){ ?>
            '<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>',
            <?php } ?>
            <?php if(in_array('menu_delete',Session::get('role_menu_action'))){ ?>
            '<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>'
            <?php } ?>
        ].join('');
    }

    /**
     * 选中父项时，同时选中子项
     * @param  datas 所有的数据
     * @param  row 当前数据
     * @param  id id 字段名
     * @param  pid 父id字段名
     */
    function selectChilds(datas,row,id,pid,checked) {
        for(var i in datas){
            if(datas[i][pid] == row[id]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],id,pid,checked);
            };
        }
    }

    function selectParentChecked(datas,row,id,pid){
        for(var i in datas){
            if(datas[i][id] == row[pid]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],id,pid);
            };
        }
    }
    function del(id) {
        var url = "<?php echo e(url('admin/menu/delete')); ?>";
        layer.confirm('确定删除菜单？', {
            btn: ['确定删除','取消'] //按钮
        }, function(){
            loadIndex = layer.load(2);
            $.ajax({
                type: 'post',
                url: url,
                data: {id:id},
                dataType: 'json',
                success: function(result){
                    layer.close(loadIndex);
                    if(result.status){
                        layer.msg(result.message, {
                            time: 1000,
                            icon: 6,
                            end: function () {
                                layer.closeAll();
                                location.href = result.data.url;
                            }
                        });
                    }else{
                        layer.msg(result.message, {
                            icon: 5,
                            time: 2000
                        });
                    }
                }
            });
        }, function(){
            layer.closeAll();
        });
    }
    function update(id) {
        var url = "<?php echo e(url('admin/menu/edit')); ?>?id="+id;
        $.ajax({
            url: url,
            type: 'get',
            success:function(shtml)
            {
                layer.open({
                    type: 1,
                    title: '修改菜单',
                    area: ['900px', '600px'],
                    shadeClose: true, //点击遮罩关闭
                    content: shtml
                });
            }
        })
    }
    function updateStatus(id, state) {
        var newstate = (state == 1) ? 0 : 1; // 发送参数值跟当前参数值相反
        $.ajax({
            type: "post",
            url: "<?php echo e(url('admin/menu/update_status')); ?>",
            data: {id: id, state: newstate},
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    $treeTable.bootstrapTable('updateCellById', {id: id, field: 'is_show', value: newstate});
                    is_expand = 0;
                } else {
                    layer.msg(data.message, {
                        icon: 5,
                        time: 2000
                    });
                    $treeTable.bootstrapTable('updateCellById', {id: id, field: 'is_show', value: state}); // 因开关点击后样式是变的，失败也重置下
                    is_expand = 0;
                }
            },
            error: function () {
                layer.msg('修改失败，请稍后再试', {
                    icon: 5,
                    time: 2000
                });
            }
        });
    }

    $('.add-btn').click(function(){
        var url = $(this).attr('data-href');
        $.ajax({
            url: url,
            type: 'get',
            success:function(shtml)
            {
                layer.open({
                    type: 1,
                    title: '新增菜单',
                    area: ['900px', '600px'],
                    shadeClose: true, //点击遮罩关闭
                    content: shtml
                });
            }
        })
    })
    var is_expand = 0;
    $('.expand_all').click(function(){
        if(is_expand == 0){
            $treeTable.treegrid({
                initialState: 'expanded',// 所有节点都展开，默认展开
                treeColumn: 1,
                expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
                expanderCollapsedClass: 'mdi mdi-folder'
            });
        }
        is_expand = 1;
    })

    $('.collapse_all').click(function(){
        if(is_expand == 1){
            $treeTable.treegrid({
                initialState: 'collapsed',// 所有节点都折叠
                treeColumn: 1,
                expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
                expanderCollapsedClass: 'mdi mdi-folder'
            });
        }
        is_expand = 0;
    })
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('admin.public.layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\phpstudy_pro\WWW\my_admin\resources\views/admin/menu/menu_index.blade.php ENDPATH**/ ?>